<template>
  <div class="container">
    <div class="top">角色管理</div>
    <div class="box">
      <div class="top1">
        <div class="left">
          <!-- 角色 -->
          <span>角色名称：</span>
          <el-input v-model="input1" class="first" placeholder="请输入角色名称"></el-input>
          <!-- 状态 -->
          <span>状态：</span>
          <el-select v-model="value" placeholder="请选择" class="second">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>

          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </div>
        <div class="right">
          <!-- 新建 -->
          <Role1 :click="get" showBetCode="xtsz-jsgl-xj"></Role1>
          <!-- 删除 -->
          <DeleteAll :multipleSelection="multipleSelection" :get="get"></DeleteAll>
        </div>
      </div>
      <!-- 表格 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width:100%"
        border
        stripe
        :cell-style="changeCellStyle"
        :header-cell-style="rowClass"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="48" align="center"></el-table-column>

        <el-table-column prop="name" label="角色名称" width="186" align="center"></el-table-column>
        <el-table-column prop="code" label="角色编码" align="center" width="150"></el-table-column>
        <el-table-column prop="type" label="角色类型" align="center" width="187">
          <template slot-scope="scope">
            <span v-if="scope.row.type==2">公司</span>
            <span v-else>集团</span>
          </template>
        </el-table-column>
        <el-table-column prop="orgName" label="所属公司" align="center" width="231"></el-table-column>
        <el-table-column prop="status" label="角色状态" align="center" width="105">
          <template slot-scope="scope">
            <div v-if="scope.row.status ==1">
              <span class="green-border"></span>
              <span>启用</span>
            </div>
            <div v-else>
              <span class="red-border"></span>
              <span>停用</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="updatedBy" label="维护人" align="center" width="135"></el-table-column>
        <el-table-column label="创建日期" width="165" align="center">
          <template slot-scope="scope">{{ scope.row.updatedTime }}</template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="334px">
          <template slot-scope="scope">
            <!-- 人员名单 -->
            <Person :id="scope.row.id"></Person>
            <!-- 编辑 -->
            <Role2 :id="scope.row.id" :click="get" showBetCode2="xtsz-jsgl-bj"></Role2>
            <!-- 查看 -->
            <span class="look" @click="look(scope.row)" v-if="_SHOWBTN('xtsz-jsgl-ckry')">查看</span>
            <!-- 设置 -->
            <Limit :id="scope.row.id" :get="get" showBetCode6="xtsz-jsgl-qxfp"></Limit>
            <!-- 删除 -->
            <Delete :id="scope.row.id" :click="get" showBetCode3="xtsz-jsgl-sc"></Delete>

            <!-- 启用 -->
            <Stop3 v-if="scope.row.status ==2" :id="scope.row.id" :click="get" showBetCode4="xtsz-jsgl-qy"></Stop3>
            <!-- 停用 -->
            <Stop v-else :id="scope.row.id" :click="get" showBetCode5="xtsz-jsgl-jy"></Stop>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="fenye">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageNum"
          background
          :page-sizes="[2, 5,10]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <!-- 角色说明 -->

    <el-dialog title="角色查看" :visible.sync="dialogVisible" width="30%">
      <div>
        <span class="a">角色名称:</span>
        <span class="b">{{this.name}}</span>
      </div>
      <div>
        <span class="a">角色编码:</span>
        <span  class="b">{{this.code}}</span>
      </div>
      <div>
        <span class="a">角色类型:</span>
        <span  class="b" v-if="this.type==1">集团</span>
          <span  class="b" v-else>公司</span>
      </div>
      <div>
        <span class="a">描述:</span>
        <span  class="b">{{this.role}}</span>
      </div>
      <div>
        <span class="a">状态:</span>
        <span  class="b" v-if="this.status==1"> 启用</span>
         <span  class="b" v-else>停用</span>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import SingleDeletion from "@/components/Popup/SingleDeletion.vue";
import Role1 from "@/components/XT/Role/Role1.vue";
import Role2 from "@/components/XT/Role/Role2.vue";
import Person from "@/components/XT/Role/Person.vue";
import Limit from "@/components/XT/Role/Limit.vue";
import Delete from "@/components/XT/Role/Delete.vue";
import Stop from "@/components/XT/Role/Stop.vue";
import Stop3 from "@/components/XT/Role/Stop3.vue";
import DeleteAll from "@/components/XT/Delete/DeleteAll";
export default {
  components: {
    SingleDeletion,
    Role1,
    Role2,
    DeleteAll,
    Person,
    Limit,
    Delete,
    Stop,
    Stop3,
  },
  data() {
    return {
      params: {
        pageNum: 1,
        name: "",
        pageSize: 10,
        status: "",
      },
      // <!-- 角色说明 -->
      dialogVisible: false,
      // 总页数
      total: 0,
      visible: true,

      // 角色名称
      input1: "",
      // 状态
      value: "",
      // 描述
      role: "",
      // 名称
      name:'',
      // 编码
      code:'',
      // 类型
      type:'',
      // 状态
      status:'',
      options: [
        {
          value: "",
          label: "全部",
        },
        {
          value: 1,
          label: "启用",
        },
        {
          value: 2,
          label: "停用",
        },
      ],
 // 状态
    
      // 角色类型
      list: [
        {
          value: "1",
          label: "启用",
        },
        {
          value: "2",
          label: "禁用",
        },
      ],
      // 角色管理列表
      tableData: [],
      // 保存的ID
      multipleSelection: [],
    };
  },
  created() {
    this.get();
  },
  methods: {
    // 角色管理列表
    get() {
      this.Api.getRole(this.params).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
      });
    },
    // 分页
    //数据条数发生变化
    handleSizeChange(newSize) {
      this.params.pageSize = newSize;
      this.get();
    },
    //翻页触发
    handleCurrentChange(currPage) {
      this.params.pageNum = currPage;
      this.get();
    },
    // 查询
    search() {
      this.Api.searchRole({
        pageNum: 1,
        name: this.input1,
        pageSize: 10,
        status: this.value,
      }).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
      });
    },
    // 查看
    look(row) {
      this.dialogVisible = true;
      this.Api.editRole({ id: row.id }).then((res) => {
        console.log(res);
        this.role = res.data.remark;
        this.code=res.data.code;
        this.name=res.data.name;
       this.type=res.data.type
//         if(this.type==1){
//  this.type='集团';
//         }else{
//           this.type='公司';
//         }
        this.status=res.data.status+''
       
      });
    },
    // 重置
    reset() {
      (this.input1 = ""), (this.value = ""), this.get();
    },
    changeCellStyle(row, column, rowIndex, columnIndex) {
      if (row.column.label === "标题") {
        return "padding-left: 20px"; // 修改的样式
      } else {
        return "";
      }
    },
    rowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0 && columnIndex === 1) {
        //指定坐标
        return "padding-left:12px";
      } else {
        return "";
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>
<style lang="less" scoped>
.a{
  display: inline-block;
  width:70px;
  text-align: right;
  margin: 10px;
}
.b{
   display: inline-block;
  width:400px;
  overflow-wrap: break-word;
 
}
.top {
  width: 1540px;
  height: 68px;
  line-height: 68px;
  color: #333333;
  font-size: 20px;
  border-bottom: 1px solid #dddddd;
  box-sizing: border-box;
}

.top1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 35px;
}
.left {
  display: flex;
  margin-top: 19px;
  align-items: center;
}
.right {
  display: flex;
  margin-top: 19px;
}
/deep/.left .el-input__inner {
  width: 154px;
  height: 36px;
}
/deep/.left .el-input {
  width: 154px;
}
.left span {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  color: #333333;
}
.el-button {
  width: 52px;
  height: 36px;
  padding: 0;
}
.five {
  width: 60px;
  height: 28px;
  margin-right: 21px;
}
.first,
.second,
.third {
  margin-right: 20px;
}
/deep/ .add.el-button {
  width: 80px;
}
/deep/.el-pagination {
  white-space: nowrap;
  padding: 2px 5px;
  color: #303133;
  font-weight: 700;
  margin-top: 46px;
}
.fenye {
  display: flex;
  justify-content: flex-end;
}
/deep/.el-pagination__jump {
  margin-left: 0;
  font-weight: 400;
  color: #606266;
}
.up {
  margin-right: 23px;
}
/deep/.el-dialog__header {
  padding: 20px 20px 10px;
  background: #e6e9ed;
}

/deep/.el-form-item__label {
  width: 82px !important;
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
}

/deep/tbody {
  tr {
    height: 45px !important;
    td {
      padding: 0px 0 !important;
    }
  }
  tr td:last-child {
    .cell {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
/deep/tbody {
  tr td:nth-child(2) {
    .cell {
      padding-left: 20px;
    }
  }
}

/deep/.el-icon-warning:before {
  content: "\e7a3";
  position: absolute;
  top: -54px !important;
}
.role {
  margin-top: 10px;
  font-size: 12px;
  color: #999999;
  margin-left: 40px;
}
.look {
  display: block;
  color: #1677ff;
  font-size: 14px;
  border-left: none;
  width: 48px;
  height: 14px;
  text-align: center;
  line-height: 14px;
  border-left: 1px solid #dddddd;
}
.green-border {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: rgba(82, 196, 26, 1);
  border-radius: 50%;
  margin-right: 8px;
}
.red-border {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: rgba(251, 54, 63, 1);
  border-radius: 50%;
  margin-right: 8px;
}
</style>